<template>
  <div class="mainbody">
    <dv-loading v-show="runFlag !== 0" class="loading">Loading...</dv-loading>
    <div class="container">
      <MainTitle :main-title="mainTitle" />
      <div class="view-frame">
        <div class="frame-ceil">
          <div class="ceil-item power">
            <button />
            <div class="power-ceil">
              <div class="power-item left">
                <div class="box">
                  <div class="value">{{ elecYearValue1 }}kWh</div>
                  <div class="year">{{ elecYear1 }}</div>
                </div>
                <span class="split-line" />
                <div class="box">
                  <div class="value">{{ elecYearValue2 }}kWh</div>
                  <div class="year">{{ elecYear2 }}</div>
                </div>
              </div>
              <div class="power-item right">
                <div class="box">
                  <div class="value">{{ elecMonthValue1 }}kWh</div>
                  <div class="year">{{ elecMonth1 }}</div>
                </div>
                <span class="split-line" />
                <div class="box">
                  <div class="value">{{ elecMonthValue2 }}kWh</div>
                  <div class="year">{{ elecMonth2 }}</div>
                </div>
              </div>
            </div>
            <div class="power-ceil">
              <div class="power-item left">
                <div class="box">
                  <div class="value">{{ elecDayValue }}kWh</div>
                  <div class="year">{{ elecDay }}</div>
                </div>
              </div>
              <div class="power-item right">
                <div class="box">
                  <div class="value">{{ monthMaxValue }}kWh</div>
                  <div class="year">{{ monthMax }}</div>
                </div>
              </div>
            </div>
          </div>

          <div class="ceil-item power load">
            <button />
            <div class="power-ceil">
              <div class="power-item left">
                <div class="box">
                  <div class="value">
                    {{
                      loadList[0] && loadList[0].value
                        ? loadList[0].value
                        : "-"
                    }}MW
                  </div>
                  <div class="year">
                    本年度{{
                      loadList[0] && loadList[0].name ? loadList[0].name : "-"
                    }}
                    <!-- {{
                      loadList[0] && loadList[0].time
                        ? "(" + loadList[0].time + ")"
                        : ""
                    }}-->
                  </div>
                </div>
              </div>
              <div class="power-item right">
                <div class="box">
                  <div class="value">
                    {{
                      loadList[1] && loadList[1].value
                        ? loadList[1].value
                        : "-"
                    }}MW
                  </div>
                  <div class="year">
                    本年度{{
                      loadList[1] && loadList[1].name ? loadList[1].name : "-"
                    }}{{
                      loadList[1] && loadList[1].time
                        ? "(" + loadList[1].time + ")"
                        : ""
                    }}
                  </div>
                </div>
              </div>
            </div>
            <div class="power-ceil">
              <div class="power-item left">
                <div v-if="loadList[2]" class="box">
                  <div class="value">
                    {{
                      loadList[2] && loadList[2].value
                        ? loadList[2].value
                        : "-"
                    }}MW
                  </div>
                  <!-- {{ loadList[2] && loadList[2].name ? loadList[2].name : "-"
                  }}-->
                  <div class="year">
                    本月最大负荷
                    {{
                      loadList[2] && loadList[2].time
                        ? "(" + loadList[2].time + ")"
                        : ""
                    }}
                  </div>
                </div>
              </div>
              <div class="power-item right">
                <div v-if="loadList[3]" class="box">
                  <div class="value">
                    {{
                      loadList[3] && loadList[3].value
                        ? loadList[3].value
                        : "-"
                    }}MW
                  </div>
                  <div class="year">
                    {{ loadList[3] && loadList[3].name ? loadList[3].name : "-"
                    }}{{
                      loadList[3] && loadList[3].time
                        ? "(" + loadList[3].time + ")"
                        : ""
                    }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="elec-trend">
          <div class="control-item">
            <div class="elec-trend-title">用电量趋势图</div>
            <div class="button-group">
              <button
                :class="[
                  'switch-button',
                  bardataSourse === 'day' ? 'system-button-selected' : '',
                ]"
                @click="setBarSourse('day')"
              >
                日
              </button>
              <button
                :class="[
                  'switch-button',
                  bardataSourse === 'month' ? 'system-button-selected' : '',
                ]"
                @click="setBarSourse('month')"
              >
                月
              </button>
            </div>
          </div>
          <div class="control-item">
            <div class="elec-trend-title">负荷趋势图</div>
            <div class="button-group">
              <button
                :class="[
                  'switch-button',
                  areadataSourse === 'day' ? 'system-button-selected' : '',
                ]"
                @click="setAreaSourse('day')"
              >
                日
              </button>
              <button
                :class="[
                  'switch-button',
                  areadataSourse === 'month' ? 'system-button-selected' : '',
                ]"
                @click="setAreaSourse('month')"
              >
                周
              </button>
            </div>
          </div>
        </div>
        <div class="frame-ceil">
          <div class="ceil-item">
            <vechart :options="realBarOption" />
          </div>

          <div class="ceil-item">
            <vechart :options="realAreaOption" />
          </div>
        </div>
        <div class="elec-trend">
          <div class="control-item">
            <div class="elec-trend-title">t4各系统用电量百分比</div>

            <div class="button-group">
              <button
                :class="[
                  'switch-button',
                  piedataSourse === 'day' ? 'system-button-selected' : '',
                ]"
                @click="setPieSourse('day')"
              >
                日
              </button>
              <button
                :class="[
                  'switch-button',
                  piedataSourse === 'month' ? 'system-button-selected' : '',
                ]"
                @click="setPieSourse('month')"
              >
                月
              </button>
            </div>
          </div>
          <div class="control-item">
            <div class="elec-trend-title">主变压器负荷趋势图</div>
            <div class="button-group">
              <button
                :class="[
                  'switch-button',
                  linedataSourse === 'day' ? 'system-button-selected' : '',
                ]"
                @click="setLineSourse('day')"
              >
                日
              </button>
              <button
                :class="[
                  'switch-button',
                  linedataSourse === 'month' ? 'system-button-selected' : '',
                ]"
                @click="setLineSourse('month')"
              >
                周
              </button>
            </div>
          </div>
        </div>
        <div class="frame-ceil">
          <div class="ceil-item">
            <vechart :options="realPieOption" />
          </div>
          <div class="ceil-item">
            <vechart :options="realLineOption" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
Object.assign(Date.prototype, {
  switch(time) {
    const date = {
      yy: this.getFullYear(),
      MM: this.getMonth() + 1,
      dd: this.getDate(),
      hh: this.getHours(),
      mm: this.getMinutes(),
      ss: this.getSeconds(),
    };
    if (/(y+)/i.test(time)) {
      time = time.replace(
        RegExp.$1,
        (this.getFullYear() + "").substr(4 - RegExp.$1.length)
      );
    }
    Object.keys(date).forEach(function (i) {
      if (new RegExp("(" + i + ")").test(time)) {
        if (RegExp.$1.length === 2) {
          date[i] < 10 ? (date[i] = "0" + date[i]) : date[i];
        }
        time = time.replace(RegExp.$1, date[i]);
      }
    });
    return time;
  },
});
import apis from "@/api/api.js";
import redisService from "@service/redisRequest.js";
import barcharts from "./json/barcharts.json";
import areacharts from "./json/areacharts.json";
import piecharts from "./json/piecharts.json";
import linecharts from "./json/linecharts.json";
import { mapState } from "vuex";
export default {
  components: {
    MainTitle: () => import("@/components/MainTitle.vue"),
    vechart: () => import("@components/charts/Vechart.vue"),
  },
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      runFlag: 0,
      thisYear: new Date().getFullYear(),
      lastYear: new Date().getFullYear() - 1,
      barcharts: barcharts,
      areacharts: areacharts,
      piecharts: piecharts,
      linecharts: linecharts,
      elecYear1: null,
      elecYear2: null,
      elecYearValue1: null,
      elecYearValue2: null,
      elecMonth1: null,
      elecMonth2: null,
      elecMonthValue1: null,
      elecMonthValue2: null,
      elecDay: null,
      elecDayValue: null,
      monthMax: null,
      monthMaxValue: null,
      realBarOption: {},
      realBarOption1: {},
      realBarOption2: {},
      realPieOption: {},
      realPieOption1: {},
      realPieOption2: {},
      realAreaOption: {},
      realAreaOption1: {},
      realAreaOption2: {},
      realLineOption: {},
      realLineOption1: {},
      realLineOption2: {},
      loadList: [],
      bardataSourse: "month",
      areadataSourse: "month",
      piedataSourse: "month",
      linedataSourse: "month",
      budgetDayData: null,
      budgetMonthData: null,
      loadDayData: null,
      loadMonthData: null,
      percentDayData: null,
      transDayData: null,
      transMonthData: null,
      redisService,
    };
  },
  computed: {
    mainTitle() {
      return this.title;
    },
    ...mapState({
      service: (state) => state.service,
      webModel: (state) => state.authentication.webModel,
      treeTemplate: (state) => state.component.treeTemplate,
    }),
  },
  created() {
    this.init();
    // console.log(window.location.hash);
    setInterval(() => {
      // that.runFlag = 0;
      window.location.reload();
    }, 36000000);
  },
  methods: {
    async init() {
      this.test8001();
      this.test8002();
      this.test8003();
      this.test8004();
      this.test8005();
      this.test8006();

      // this.getLeftScreenCTotalYear()
      // this.getScreenLeftCTotalMonth()
      // this.getLeftScreenCTotalDay()
      // this.getLeftScreenCMaxMonth()
      this.getLeftScreenPUntilToday();
      // this.getLeftScreenCMonthly()
      // this.getLeftScreenCDaily()
      this.getLeftScreenPMaxMonthly();
      this.getLeftScreenPMaxDaily();
      this.getLeftScreenCEachSystem();
      this.getLeftScreenCEachSystemDay();
      this.getLeftScreenPEachbuilding();
      this.getLeftScreenPEachbuildingDay();
      // this.serchLoad()
    },
    async test8001() {
      try {
        this.runFlag = 1;
        const result = await this.service.test8001();
        // console.log(result, "12345432");
        this.elecYear1 = result[0].time;
        this.elecYear2 = result[1].time;
        this.elecYearValue1 = Math.round(result[0].value).toLocaleString();
        this.elecYearValue2 = Math.round(result[1].value).toLocaleString();

        // console.log(elecYearValue1, elecYearValue2, "数据");

        this.runFlag = 0;
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "年用电量数据获取出错",
          type: "error",
          duration: 2500,
        });
      }
    },
    async test8002() {
      try {
        this.runFlag = 1;
        const result = await this.service.test8002({});

        this.runFlag--;
        this.elecMonth1 = result[0].time;
        this.elecMonth2 = result[1].time;

        this.elecMonthValue1 = Math.round(result[0].value).toLocaleString();

        this.elecMonthValue2 = Math.round(result[1].value).toLocaleString();

        this.runFlag = 0;
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "月用电量数据获取出错",
          type: "error",
          duration: 2500,
        });
      }
    },
    async test8003() {
      try {
        this.runFlag = 1;
        const result = await this.service.test8003({});

        this.runFlag = 0;
        this.elecDay = result.time;
        this.elecDayValue = Math.round(result.value).toLocaleString();
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "日用电量数据获取出错",
          type: "error",
          duration: 2500,
        });
      }
    },
    async test8004() {
      try {
        this.runFlag = 1;
        const result = await this.service.test8004({});
        // console.log(result)
        this.runFlag = 0;
        this.monthMax = result.time;
        this.monthMaxValue = Math.round(result.value).toLocaleString();
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "本月最高用电量数据获取出错",
          type: "error",
          duration: 2500,
        });
      }
    },
    async test8005() {
      try {
        this.runFlag = 1;
        const result = await this.service.test8005({});
        // console.log(result, "日用电量");
        this.budgetDayData = result[0].value;
        // console.log(this.budgetDayData, "日用电量");
        const t3 = result[0];
        const t4 = result[1];
        // console.log(t3, t4, "日用电量");
        const t3data = result[0].value;
        const t4data = result[1].value;

        this.realBarOption2 = {
          ...this.barcharts,
          series: [
            { ...this.barcharts.series[0], data: t3data || [] },
            { ...this.barcharts.series[1], data: t4data || [] },
          ],
          xAxis: {
            ...this.barcharts.xAxis[0],
            data: t3.time.length > t4.time.length ? t3.time : t4.time,
          },
          yAxis: {
            ...this.barcharts.yAxis[0],
            axisLable: {
              ...this.barcharts.yAxis.axisLable,
              formatter: function (value, index) {
                var value1;
                if (value >= 1000) {
                  value1 = value / 1000 + "k";
                } else if (value < 1000) {
                  value1 = value;
                }
                return value1;
              },
            },
          },
        };
        this.runFlag = 0;
      } catch (e) {
        this.$notify({
          title: "日用电量数据获取出错",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
      }
    },
    async test8006() {
      try {
        this.runFlag = 1;
        const result = await this.service.test8006({});
        // console.log(result, 123);
        this.budgetMonthData = result.data;
        const t3data = result[0].value;
        const t4data = result[1].value;
        this.realBarOption1 = {
          ...this.barcharts,
          series: [
            { ...this.barcharts.series[0], data: t3data || [] },
            { ...this.barcharts.series[1], data: t4data || [] },
          ],
          xAxis: {
            ...this.barcharts.xAxis[0],
            data: [
              "01月",
              "02月",
              "03月",
              "04月",
              "05月",
              "06月",
              "07月",
              "08月",
              "09月",
              "10月",
              "11月",
              "12月",
            ],
          },
        };
        this.realBarOption = this.realBarOption1;
        this.runFlag = 0;
      } catch (e) {
        this.$notify({
          title: "月用电量趋势数据获取出错",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
      }
    },
    setBarSourse(val) {
      this.bardataSourse = val;

      if (val === "day") {
        this.realBarOption = this.realBarOption2;
        // console.log(val, "日有问题", this.realBarOption2);
      } else {
        this.realBarOption = this.realBarOption1;
        // console.log(val, this.realBarOption1);
      }
    },
    // 负荷趋势日月切换显示
    setAreaSourse(val) {
      this.areadataSourse = val;
      if (val === "day") {
        this.realAreaOption = this.realAreaOption2;
      } else {
        this.realAreaOption = this.realAreaOption1;
      }
    },
    setPieSourse(val) {
      this.piedataSourse = val;
      if (val === "day") {
        this.realPieOption = this.realPieOption2;
      } else {
        this.realPieOption = this.realPieOption1;
      }
    },

    setLineSourse(val) {
      this.linedataSourse = val;
      if (val === "day") {
        this.realLineOption = this.realLineOption2;
      } else {
        this.realLineOption = this.realLineOption1;
      }
    },

    async getLeftScreenCTotalYear() {
      try {
        this.runFlag = 1;
        const result = await this.service.getLeftScreenCTotalYear({});
        this.elecYear1 = result.data[1].time;
        this.elecYear2 = result.data[0].time;
        this.elecYearValue1 = result.data[1].value.toLocaleString();
        this.elecYearValue2 = result.data[0].value.toLocaleString();
        this.runFlag = 0;
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "年用电量数据获取出错",
          type: "error",
          duration: 2500,
        });
      }
    },
    async getScreenLeftCTotalMonth() {
      try {
        this.runFlag = 1;
        const result = await this.service.getScreenLeftCTotalMonth({});
        this.runFlag--;
        this.elecMonth1 = result.data[1].time;
        this.elecMonth2 = result.data[0].time;
        this.elecMonthValue1 = result.data[1].value.toLocaleString();
        this.elecMonthValue2 = result.data[0].value.toLocaleString();
        this.runFlag = 0;
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "月用电量数据获取出错",
          type: "error",
          duration: 2500,
        });
      }
    },
    async getLeftScreenCTotalDay() {
      try {
        this.runFlag = 1;
        const result = await this.service.getLeftScreenCTotalDay({});
        this.runFlag = 0;
        this.elecDay = result.data[0].time;
        this.elecDayValue = result.data[0].value.toLocaleString();
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "日用电量数据获取出错",
          type: "error",
          duration: 2500,
        });
      }
    },
    async getLeftScreenCMaxMonth() {
      try {
        this.runFlag = 1;
        const result = await this.service.getLeftScreenCMaxMonth({});
        this.runFlag = 0;
        this.monthMax = result.data[0].time;
        this.monthMaxValue = result.data[0].value.toLocaleString();
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "本月最高用电量数据获取出错",
          type: "error",
          duration: 2500,
        });
      }
    },
    async getLeftScreenPUntilToday() {
      try {
        this.runFlag = 1;
        const result = await this.service.getLeftScreenPUntilToday({});
        this.runFlag = 0;
        this.loadList = result.data.filter((i) => i.id !== "monthMax");

        this.loadList.find((item) => {
          item.value = item.value.toLocaleString();
        });
        // console.log(this.loadList, "098989");
        this.loadList.find((e) => e.id === "dayMax").time = null;
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "负荷数据获取出错",
          type: "error",
          duration: 2500,
        });
      }
    },
    async getLeftScreenCMonthly() {
      try {
        this.runFlag = 1;
        const result = await this.service.getLeftScreenCMonthly({});
        this.budgetMonthData = result.data;
        const budget = result.data.find((e) => e.id === "budget");
        const t3 = result.data.find((e) => e.id === "t3");
        const t4 = result.data.find((e) => e.id === "t4");
        const t3data = [];
        const t4data = [];
        t3.time.forEach((item, index) => {
          const i = [t3.time[index], t3.value[index]];
          t3data.push(i);
        });
        t4.time.forEach((item, index) => {
          const i = [t4.time[index], t4.value[index]];
          t4data.push(i);
        });
        // console.log(budget, "时间2");
        this.realBarOption1 = {
          ...this.barcharts,
          series: [
            { ...this.barcharts.series[0], data: t3data || [] },
            { ...this.barcharts.series[1], data: t4data || [] },
            { ...this.barcharts.series[2], data: budget ? budget.value : [] },
          ],
          xAxis: {
            ...this.barcharts.xAxis[0],
            data: budget
              ? budget.time
              : [
                  "01月",
                  "02月",
                  "03月",
                  "04月",
                  "05月",
                  "06月",
                  "07月",
                  "08月",
                  "09月",
                  "10月",
                  "11月",
                  "12月",
                ],
          },
        };
        this.realBarOption = this.realBarOption1;
        this.runFlag = 0;
      } catch (e) {
        this.$notify({
          title: "月用电量趋势数据获取出错",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
      }
    },
    async getLeftScreenCDaily() {
      try {
        this.runFlag = 1;
        const result = await this.service.getLeftScreenCDaily({});
        this.budgetDayData = result.data;
        const budget = result.data.find((e) => e.id === "budget");
        const t3 = result.data.find((e) => e.id === "t3");
        const t4 = result.data.find((e) => e.id === "t4");
        const t3data = [];
        const t4data = [];
        t3.time.forEach((item, index) => {
          const i = [t3.time[index], t3.value[index]];
          t3data.push(i);
        });
        t4.time.forEach((item, index) => {
          const i = [t4.time[index], t4.value[index]];
          t4data.push(i);
        });
        this.realBarOption2 = {
          ...this.barcharts,
          series: [
            { ...this.barcharts.series[0], data: t3data },
            { ...this.barcharts.series[1], data: t4data },
            { ...this.barcharts.series[2], data: budget.value },
          ],
          xAxis: {
            ...this.barcharts.xAxis[0],
            data: budget
              ? budget.time
              : t3.time.length > t4.time.length
              ? t3.time
              : t4.time,
          },
          yAxis: {
            ...this.barcharts.yAxis[0],
            axisLable: {
              ...this.barcharts.yAxis.axisLable,
              formatter: function (value, index) {
                var value1;
                if (value >= 1000) {
                  value1 = value / 1000 + "k";
                } else if (value < 1000) {
                  value1 = value;
                }
                return value1;
              },
            },
          },
        };
        this.runFlag = 0;
      } catch (e) {
        this.$notify({
          title: "日用电量数据获取出错",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
      }
    },
    // 负荷趋势动态标记点周表
    async getLeftScreenPMaxMonthly() {
      try {
        this.runFlag = 1;
        const result = await this.service.serchMax({});
        this.loadMonthData = result.data;
        // console.log(this.loadMonthData, "是");

        const timer2021 = this.loadMonthData[0].maxTime;
        const timer2020 = this.loadMonthData[1].maxTime;

        const data2019 = result.data.find((e) => e.id === this.lastYear + "年");
        const data2020 = result.data.find((e) => e.id === this.thisYear + "年");

        var length1 = data2019.value.length;
        var length2 = data2020.value.length;

        const array2019 = [];
        const array2020 = [];

        var offsetArr1 = [1, -10];
        var offsetArr2 = [1, -10];
        // var index1 = 0;
        // var index2 = 0;
        var index1 = data2019.value.indexOf(
          Math.max.apply(Math, data2019.value)
        );
        var index2 = data2020.value.indexOf(
          Math.max.apply(Math, data2020.value)
        );

        if ((index1 / length1) * 100 > 90) {
          offsetArr1 = [-45, -10];
        } else if ((index1 / length1) * 100 < 10) {
          offsetArr1 = [45, -10];
        } else {
          offsetArr1 = [1, -10];
        }

        if ((index2 / length2) * 100 > 90) {
          offsetArr2 = [-45, -10];
        } else if ((index2 / length2) * 100 < 10) {
          offsetArr2 = [45, -10];
        } else {
          offsetArr2 = [10, -10];
        }
        // console.log(offsetArr1, "2020");
        // console.log(offsetArr2, "2021");
        const formatter = function (value, index) {
          var date = new Date(value);
          var texts = [date.getMonth() + 1, date.getDate()];
          return texts[0] + "月" + texts[1] + "日";
        };
        const toolTipFormatter = function (params, ticket, callback) {
          let showHtm = params[0].value[0].substr(5);
          for (var i = 0; i < params.length; i++) {
            showHtm =
              showHtm +
              "<br />" +
              params[i].seriesName +
              " : " +
              params[i].value[1];
          }
          return showHtm;
        };

        data2019.time.forEach((item, index) => {
          let i;
          // console.log(data2019.value[index],'时间')
          if (data2019.value[index]) {
            i = [data2019.time[index], data2019.value[index].toFixed(2)];
          } else {
            i = [data2019.time[index], data2019.value[index].toFixed(2)];
          }
          array2019.push(i);
        });

        data2020.time.forEach((item, index) => {
          let i;
          if (data2020.value[index]) {
            i = [data2020.time[index], data2020.value[index].toFixed(2)];
          } else {
            i = [data2020.time[index], data2020.value[index].toFixed(2)];
          }
          array2020.push(i);
        });
        // console.log(array2019, "数据");
        this.realAreaOption1 = {
          ...this.areacharts,
          legend: {
            ...this.areacharts.legend,
            data: [this.thisYear + "年", this.lastYear + "年"],
          },
          tooltip: { trigger: "axis", formatter: toolTipFormatter },
          xAxis: {
            ...this.areacharts.xAxis,

            axisLabel: {
              ...this.areacharts.xAxis.axisLabel,
              formatter: formatter,
            },
          },
          series: [
            {
              ...this.areacharts.series[0],
              name: this.thisYear + "年",
              data: array2020,
              markPoint: {
                ...this.areacharts.series[1].markPoint,
                label: {
                  formatter: "MAX：{c}",
                  color: "rgb(0,244,255)",
                  offset: offsetArr2,
                  fontSize: 14,
                },
              },
              markLine: {
                symbol: "none",
                label: {
                  show: false,
                },
                lineStyle: {
                  type: "solid",
                  color: "rgba(117,129,189,0.3)",
                },
                data: [{ xAxis: timer2020 }],
              },
            },
            {
              ...this.areacharts.series[1],
              name: this.lastYear + "年",
              data: array2019,
              markPoint: {
                ...this.areacharts.series[1].markPoint,
                label: {
                  formatter: "MAX：{c}",
                  color: "rgb(255,160,223)",
                  offset: offsetArr1,
                  fontSize: 14,
                },
              },
              markLine: {
                symbol: "none",
                label: {
                  show: false,
                },
                lineStyle: {
                  type: "solid",
                  color: "rgba(117,129,189,0.3)",
                },
                data: [{ xAxis: timer2021 }],
              },
            },
          ],
        };
        this.realAreaOption = this.realAreaOption1;
        this.runFlag = 0;
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "负荷趋势数据获取出错",
          type: "error",
          duration: 2500,
        });
      }
    },
    //负荷趋势日表
    async getLeftScreenPMaxDaily() {
      try {
        this.runFlag = 1;
        const result = await this.service.serchMaxByDay({});

        this.loadDayData = result.data;
        // console.log(this.loadDayData,'负荷趋势日表数据')
        let dataX = result.data[0].time;
        const data2019 = result.data.find((e) => e.id === this.lastYear + "年");
        const data2020 = result.data.find((e) => e.id === this.thisYear + "年");

        var length1 = data2019.value.length;
        var length2 = data2020.value.length;

        const array2019 = [];
        const array2020 = [];

        var offsetArr1 = [1, -10];
        var offsetArr2 = [1, -10];
        // var index1 = 0;
        // var index2 = 0;
        var index1 = data2019.value.indexOf(
          Math.max.apply(Math, data2019.value)
        );
        var index2 = data2020.value.indexOf(
          Math.max.apply(Math, data2020.value)
        );

        if ((index1 / length1) * 100 > 90) {
          offsetArr1 = [-45, -10];
        } else if ((index1 / length1) * 100 < 10) {
          offsetArr1 = [45, -10];
        } else {
          offsetArr1 = [1, -10];
        }

        if ((index2 / length2) * 100 > 90) {
          offsetArr2 = [-45, -10];
        } else if ((index2 / length2) * 100 < 10) {
          offsetArr2 = [45, -10];
        } else {
          offsetArr2 = [10, -10];
        }

        data2019.time.forEach((item, index) => {
          let i;
          if (data2019.value[index]) {
            i = [data2019.time[index], data2019.value[index].toFixed(2)];
          } else {
            i = [data2019.time[index], data2019.value[index]];
          }
          array2019.push(i);
        });
        data2020.time.forEach((item, index) => {
          let i;
          if (data2020.value[index]) {
            i = [data2020.time[index], data2020.value[index].toFixed(2)];
          } else {
            i = [data2020.time[index], data2020.value[index]];
          }
          array2020.push(i);
        });
        // const formatter = function(value, index) {
        //   return new Date(Date.parse(value)).switch('hh时')
        // }
        const formatter1 = function (value, index) {
          // console.log(value,'kkkkkkkkkkkkkkk')
          return new Date(Date.parse(value)).switch("hh时");
        };

        const formatter = function (value, index) {
          var date = new Date(value);
          var texts = date.getHours();
          texts = texts.toString().length > 1 ? texts : "0" + texts;
          return texts + "时";
        };
        const toolTipFormatter = function (params, ticket, callback) {
          let showHtm = params[0].value[0].substr(5);
          for (var i = 0; i < params.length; i++) {
            showHtm =
              showHtm +
              "<br />" +
              params[i].seriesName +
              " : " +
              params[i].value[1];
          }
          return showHtm;
        };

        this.realAreaOption2 = {
          ...this.areacharts,
          legend: {
            ...this.areacharts.legend,
            data: [this.thisYear + "年", this.lastYear + "年"],
          },
          tooltip: { trigger: "axis", formatter: toolTipFormatter },
          xAxis: {
            ...this.areacharts.xAxis,
            axisLabel: {
              ...this.areacharts.xAxis.axisLabel,
              interval: 3,
              formatter: formatter,
            },
          },
          series: [
            {
              ...this.areacharts.series[0],
              name: this.thisYear + "年",
              data: array2020,
              markPoint: {
                ...this.areacharts.series[1].markPoint,
                label: {
                  formatter: "MAX：{c}",
                  color: "rgb(0,244,255)",
                  offset: offsetArr2,
                  fontSize: 14,
                },
              },
            },
            {
              ...this.areacharts.series[1],
              name: this.lastYear + "年",
              data: array2019,
              markPoint: {
                ...this.areacharts.series[1].markPoint,
                label: {
                  formatter: "MAX：{c}",
                  color: "rgb(255,160,223)",
                  offset: offsetArr1,
                  fontSize: 14,
                },
              },
            },
          ],
        };
        this.runFlag = 0;
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "负荷趋势数据获取出错",
          type: "error",
          duration: 2500,
        });
      }
    },

    async getLeftScreenCEachSystem() {
      try {
        this.runFlag = 1;
        let resultfather = await apis.queryElectMonth();
        let result = resultfather.data;

        let data2020 = result.data.find(
          (e) => e.time.slice(0, 4) === this.thisYear + ""
        ).data;
        let data2019 = result.data.find(
          (e) => e.time.slice(0, 4) === this.lastYear + ""
        ).data;

        if (data2020.length == 0) {
          data2020 = [
            {
              id: "纯水系统",
              name: "纯水系统",
              time: "2021年08月",
              value: "257844.96",
              total: "6511032.94",
            },
            {
              id: "FFU",
              name: "FFU",
              time: "2021年08月",
              value: "322754.72",
              total: "6511032.94",
            },
            {
              id: "MOD厂",
              name: "MOD厂",
              time: "2021年08月",
              value: "403933.43",
              total: "6511032.94",
            },
            {
              id: "TOUCH厂",
              name: "TOUCH厂",
              time: "2021年08月",
              value: "543813.41",
              total: "6511032.94",
            },
            {
              id: "其它(9项)",
              name: "其它(9项)",
              time: "2021年08月",
              value: "653004.41",
              total: "6511032.94",
            },
            {
              id: "EL厂",
              name: "EL厂",
              time: "2021年08月",
              value: "718398.82",
              total: "6511032.94",
            },
            {
              id: "CDA系统",
              name: "CDA系统",
              time: "2021年08月",
              value: "893970.38",
              total: "6511032.94",
            },
            {
              id: "冰水系统",
              name: "冰水系统",
              time: "2021年08月",
              value: "1126502.93",
              total: "6511032.94",
            },
            {
              id: "ARRAY厂",
              name: "ARRAY厂",
              time: "2021年08月",
              value: "1590809.87",
              total: "6511032.94",
            },
          ];
        }
        let d2020 = data2020.map(({ name, value }) => ({
          value: value,
          name: name,
        }));

        let d2019 = data2019.map(({ name, value }) => ({
          value: value,
          name: name,
        }));

        let legends = [];

        data2020.forEach((item, index) => {
          let i = item.name;
          if (i.trim() !== "动力辅助" && i.trim() !== "杂项") {
            legends.push(i);
          }
        });
        this.realPieOption1 = {
          ...this.piecharts,
          legend: { ...this.piecharts.legend, data: legends },
          series: [
            {
              ...this.piecharts.series[0],
              name: this.thisYear + "年",
              data: d2020,
            },
            {
              ...this.piecharts.series[1],
              name: this.lastYear + "年",
              data: d2019,
            },
          ],
        };
        this.realPieOption = this.realPieOption1;
        this.runFlag = 0;
      } catch (e) {
        this.$notify({
          title: "用电量百分比数据获取出错",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
      }
    },

    async getLeftScreenCEachSystemDay() {
      this.runFlag = 1;
      let resultfather = await apis.queryElectDay({});
      let result = resultfather.data;
      // console.log(result);

      // result = {
      //   data: [
      //     {
      //       data: [],
      //       time: "2021年08月",
      //     },
      //     { data: [], time: "2020年08月" },
      //   ],
      // };

      let data2020 = result.data.find(
        (e) => e.time.slice(0, 4) === this.thisYear + ""
      ).data;
      let data2019 = result.data.find(
        (e) => e.time.slice(0, 4) === this.lastYear + ""
      ).data;
      if (data2020.length == 0) {
        data2020 = [
          {
            id: "纯水系统",
            name: "纯水系统",
            time: "2021年08月03日",
            value: "85475.96",
            total: "2165507.84",
          },
          {
            id: "FFU",
            name: "FFU",
            time: "2021年08月03日",
            value: "107579.37",
            total: "2165507.84",
          },
          {
            id: "MOD厂",
            name: "MOD厂",
            time: "2021年08月03日",
            value: "134464.08",
            total: "2165507.84",
          },
          {
            id: "TOUCH厂",
            name: "TOUCH厂",
            time: "2021年08月03日",
            value: "179837.86",
            total: "2165507.84",
          },
          {
            id: "其它(9项)",
            name: "其它(9项)",
            time: "2021年08月03日",
            value: "219657.42",
            total: "2165507.84",
          },
          {
            id: "EL厂",
            name: "EL厂",
            time: "2021年08月03日",
            value: "237508.30",
            total: "2165507.84",
          },
          {
            id: "CDA系统",
            name: "CDA系统",
            time: "2021年08月03日",
            value: "296339.62",
            total: "2165507.84",
          },
          {
            id: "冰水系统",
            name: "冰水系统",
            time: "2021年08月03日",
            value: "378437.27",
            total: "2165507.84",
          },
          {
            id: "ARRAY厂",
            name: "ARRAY厂",
            time: "2021年08月03日",
            value: "526207.96",
            total: "2165507.84",
          },
        ];
      }

      let d2020 = data2020.map(({ name, value }) => ({
        value: value,
        name: name,
      }));

      let d2019 = data2019.map(({ name, value }) => ({
        value: value,
        name: name,
      }));

      let legends = [];
      data2020.forEach((item, index) => {
        const i = item.name;
        if (i.trim() !== "动力辅助" && i.trim() !== "杂项") {
          legends.push(i);
        }
      });
      this.realPieOption2 = {
        ...this.piecharts,
        legend: { ...this.piecharts.legend, data: legends },
        series: [
          {
            ...this.piecharts.series[0],
            name: this.thisYear + "年",
            data: d2020,
          },
          {
            ...this.piecharts.series[1],
            name: this.lastYear + "年",
            data: d2019,
          },
        ],
      };
      this.runFlag = 0;
    },

    // 主变压器负荷趋势图周表
    async getLeftScreenPEachbuilding() {
      try {
        this.runFlag = 1;
        const result = await this.service.serchLoad();
        // console.log(result, "主变压器");

        const twomaxTime = result.data[0].maxTime;
        const threemaxTime = result.data[1].maxTime;
        const onemaxTime = result.data[2].maxTime;
        const pointNamemaxTime = result.data[3].maxTime;

        this.transMonthData = result.data;
        // console.log(result.data,'22222222222222周报数据')
        const tr1 = result.data.find((e) => e.pointId === "#1TR");
        const tr2 = result.data.find((e) => e.pointId === "#2TR");
        const tr3 = result.data.find((e) => e.pointId === "#3TR");
        const total = result.data.find((e) => e.pointId === "csot");

        const arraytr1 = [];
        const arraytr2 = [];
        const arraytr3 = [];
        const arraytotal = [];

        var length1 = tr1.value.length;
        var length2 = tr2.value.length;
        var length3 = tr3.value.length;
        var length4 = total.value.length;

        var offsetArr1 = [1, -10];
        var offsetArr2 = [1, -10];
        var offsetArr3 = [1, -10];
        var offsetArr4 = [1, -10];

        var index1 = tr1.value.indexOf(Math.max.apply(Math, tr1.value));
        var index2 = tr2.value.indexOf(Math.max.apply(Math, tr2.value));
        var index3 = tr3.value.indexOf(Math.max.apply(Math, tr3.value));
        var index4 = total.value.indexOf(Math.max.apply(Math, total.value));

        if ((index1 / length1) * 100 > 90) {
          offsetArr1 = [-45, -10];
        } else if ((index1 / length1) * 100 < 10) {
          offsetArr1 = [45, -10];
        } else {
          offsetArr1 = [1, -10];
        }

        if ((index2 / length2) * 100 > 90) {
          offsetArr2 = [-45, -10];
        } else if ((index2 / length2) * 100 < 10) {
          offsetArr2 = [45, -10];
        } else {
          offsetArr2 = [10, -10];
        }

        if ((index3 / length3) * 100 > 90) {
          offsetArr3 = [-45, -10];
        } else if ((index3 / length3) * 100 < 10) {
          offsetArr3 = [45, -10];
        } else {
          offsetArr3 = [1, -10];
        }

        if ((index4 / length4) * 100 > 90) {
          offsetArr4 = [-45, -10];
        } else if ((index4 / length4) * 100 < 10) {
          offsetArr4 = [45, -10];
        } else {
          offsetArr4 = [10, -10];
        }

        tr1.time.forEach((item, index) => {
          const i = [tr1.time[index], tr1.value[index].toFixed(2)];
          arraytr1.push(i);
        });
        tr2.time.forEach((item, index) => {
          const i = [tr2.time[index], tr2.value[index].toFixed(2)];
          arraytr2.push(i);
        });
        tr3.time.forEach((item, index) => {
          const i = [tr3.time[index], tr3.value[index].toFixed(2)];
          arraytr3.push(i);
        });
        total.time.forEach((item, index) => {
          const i = [total.time[index], total.value[index].toFixed(2)];
          arraytotal.push(i);
        });
        const formatter = function (value, index) {
          // console.log(value, index, "时间2");
          return new Date(Date.parse(value)).switch("MM月dd日");
        };
        this.realLineOption1 = {
          ...this.linecharts,
          xAxis: {
            ...this.linecharts.xAxis,
            axisLabel: {
              ...this.linecharts.xAxis.axisLabel,
              formatter: formatter,
            },
          },
          series: [
            {
              ...this.linecharts.series[0],
              data: arraytr1,
              markPoint: {
                ...this.areacharts.series[1].markPoint,
                label: {
                  formatter: "MAX：{c}",
                  color: "rgb(137,201,151)",
                  offset: offsetArr1,
                  fontSize: 14,
                },
              },
              markLine: {
                symbol: "none",
                label: {
                  show: false,
                },
                lineStyle: {
                  type: "solid",
                  color: "rgba(117,129,189,0.3)",
                },
                data: [{ xAxis: onemaxTime }],
              },
            },
            {
              ...this.linecharts.series[1],
              data: arraytr2,
              markPoint: {
                ...this.areacharts.series[1].markPoint,
                label: {
                  formatter: "MAX：{c}",
                  color: "rgb(86,112,209)",
                  offset: offsetArr2,
                  fontSize: 14,
                },
              },
              markLine: {
                symbol: "none",
                label: {
                  show: false,
                },
                lineStyle: {
                  type: "solid",
                  color: "rgba(117,129,189,0.3)",
                },
                data: [{ xAxis: twomaxTime }],
              },
            },
            {
              ...this.linecharts.series[2],
              data: arraytr3,
              markPoint: {
                ...this.areacharts.series[1].markPoint,
                label: {
                  formatter: "MAX：{c}",
                  color: "rgb(0,244,255)",
                  offset: offsetArr3,
                  fontSize: 14,
                },
              },
              markLine: {
                symbol: "none",
                label: {
                  show: false,
                },
                lineStyle: {
                  type: "solid",
                  color: "rgba(117,129,189,0.3)",
                },

                data: [{ xAxis: threemaxTime }],
              },
            },
            {
              ...this.linecharts.series[3],
              data: arraytotal,
              markPoint: {
                ...this.areacharts.series[1].markPoint,
                label: {
                  formatter: "MAX：{c}",
                  color: "rgb(255,160,223)",
                  offset: offsetArr4,
                  fontSize: 14,
                },
              },
              markLine: {
                symbol: "none",
                label: {
                  show: false,
                },
                lineStyle: {
                  type: "solid",
                  color: "rgba(117,129,189,0.3)",
                },
                data: [{ xAxis: pointNamemaxTime }],
              },
            },
          ],
        };
        this.realLineOption = this.realLineOption1;
        this.runFlag = 0;
      } catch (e) {
        this.$notify({
          title: "主变压器负荷趋势数据获取出错",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
      }
    },

    //主变压器负荷趋势图ri表
    async getLeftScreenPEachbuildingDay() {
      try {
        this.runFlag = 1;
        const result = await this.service.serchLoadByDay();
        this.transDayData = result.data;
        // console.log(result.data,'11111111111111111日报数据')
        const tr1 = result.data.find((e) => e.pointId === "#1TR");
        const tr2 = result.data.find((e) => e.pointId === "#2TR");
        const tr3 = result.data.find((e) => e.pointId === "#3TR");
        const total = result.data.find((e) => e.pointId === "csot");

        const arraytr1 = [];
        const arraytr2 = [];
        const arraytr3 = [];
        const arraytotal = [];

        var length1 = tr1.value.length;
        var length2 = tr2.value.length;
        var length3 = tr3.value.length;
        var length4 = total.value.length;

        var offsetArr1 = [1, -10];
        var offsetArr2 = [1, -10];
        var offsetArr3 = [1, -10];
        var offsetArr4 = [1, -10];

        var index1 = tr1.value.indexOf(Math.max.apply(Math, tr1.value));
        var index2 = tr2.value.indexOf(Math.max.apply(Math, tr2.value));
        var index3 = tr3.value.indexOf(Math.max.apply(Math, tr3.value));
        var index4 = total.value.indexOf(Math.max.apply(Math, total.value));

        if ((index1 / length1) * 100 > 90) {
          offsetArr1 = [-45, -10];
        } else if ((index1 / length1) * 100 < 10) {
          offsetArr1 = [45, -10];
        } else {
          offsetArr1 = [1, -10];
        }

        if ((index2 / length2) * 100 > 90) {
          offsetArr2 = [-45, -10];
        } else if ((index2 / length2) * 100 < 10) {
          offsetArr2 = [45, -10];
        } else {
          offsetArr2 = [10, -10];
        }

        if ((index3 / length3) * 100 > 90) {
          offsetArr3 = [-45, -10];
        } else if ((index3 / length3) * 100 < 10) {
          offsetArr3 = [45, -10];
        } else {
          offsetArr3 = [1, -10];
        }

        if ((index4 / length4) * 100 > 90) {
          offsetArr4 = [-45, -10];
        } else if ((index4 / length4) * 100 < 10) {
          offsetArr4 = [45, -10];
        } else {
          offsetArr4 = [10, -10];
        }

        tr1.time.forEach((item, index) => {
          const i = [tr1.time[index], tr1.value[index].toFixed(2)];
          arraytr1.push(i);
        });
        tr2.time.forEach((item, index) => {
          const i = [tr2.time[index], tr2.value[index].toFixed(2)];
          arraytr2.push(i);
        });
        tr3.time.forEach((item, index) => {
          const i = [tr3.time[index], tr3.value[index].toFixed(2)];
          arraytr3.push(i);
        });
        total.time.forEach((item, index) => {
          const i = [total.time[index], total.value[index].toFixed(2)];
          arraytotal.push(i);
        });
        const formatter = function (value, index) {
          return new Date(Date.parse(value)).switch("hh时");
          // console.log(value,'9999')
        };

        this.realLineOption2 = {
          ...this.linecharts,
          xAxis: {
            ...this.linecharts.xAxis,
            axisLabel: {
              ...this.linecharts.xAxis.axisLabel,
              interval: 3,
              formatter: formatter,
            },
          },
          series: [
            {
              ...this.linecharts.series[0],
              data: arraytr1,
              markPoint: {
                ...this.areacharts.series[1].markPoint,
                label: {
                  formatter: "MAX：{c}",
                  color: "rgb(137,201,151)",
                  offset: offsetArr1,
                  fontSize: 14,
                },
              },
            },
            {
              ...this.linecharts.series[1],
              data: arraytr2,
              markPoint: {
                ...this.areacharts.series[1].markPoint,
                label: {
                  formatter: "MAX：{c}",
                  color: "rgb(86,112,209)",
                  offset: offsetArr2,
                  fontSize: 14,
                },
              },
            },
            {
              ...this.linecharts.series[2],
              data: arraytr3,
              markPoint: {
                ...this.areacharts.series[1].markPoint,
                label: {
                  formatter: "MAX：{c}",
                  color: "rgb(0,244,255)",
                  offset: offsetArr3,
                  fontSize: 14,
                },
              },
            },
            {
              ...this.linecharts.series[3],
              data: arraytotal,
              markPoint: {
                ...this.areacharts.series[1].markPoint,
                label: {
                  formatter: "MAX：{c}",
                  color: "rgb(255,160,223)",
                  offset: offsetArr4,
                  fontSize: 14,
                },
              },
            },
          ],
        };
        this.runFlag = 0;
      } catch (e) {
        this.$notify({
          title: "主变压器负荷趋势数据获取出错",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba($color: #333, $alpha: 0.7);
  z-index: 9;
}
.mainbody {
  height: 100vh;
  background: url("~@assets/report/bg.png") no-repeat;
  background-size: 100% 100%;
}
.container {
  position: relative;
  width: 92%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
}
.view-frame {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  height: 89%;
  overflow-y: scroll;
  margin-top: 1rem;
  padding-top: 1rem;
  // 隐藏滚动条
  &::-webkit-scrollbar {
    // 兼容Chrome
    display: none;
  }
  &::-o-scrollbar {
    // 兼容Opera
    display: none;
  }
  scrollbar-width: none; // 兼容Firefox
  -ms-overflow-style: none; // 兼容edge
}
.frame-ceil {
  display: flex;
  justify-content: space-between;
  flex: 1;
}
.ceil-item {
  flex-basis: 49%;
  display: flex;
  flex-flow: column;
  position: relative;
}
.ceil-item button {
  position: absolute;
  width: 15%;
  height: 20%;
  left: 42.5%;
  top: 40%;
  border: none;
  outline: none;
  background: transparent;
  // cursor: pointer;
}
.power {
  flex-flow: column;
  justify-content: space-between;
  background: url("~@assets/report/powerbg.png") no-repeat center center;
  background-size: 100% 100%;
}
.power.load {
  background: url("~@assets/report/loadbg.png") no-repeat center center;
  background-size: 100% 100%;
}
.power-ceil {
  flex-basis: 49%;
  justify-content: space-between;
  display: flex;
}
.power-item {
  display: flex;
  flex-basis: 49%;
  justify-items: center;
  padding: 2rem;
  align-items: center;
}
.power-item.left {
  justify-content: flex-start;
}
.power-item.right {
  justify-content: flex-end;
}
.box {
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.value {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.year {
  font-size: 1.4rem;
  color: #fff;
}
.split-line {
  display: inline-block;
  width: 1px;
  height: 60%;
  background: #aaa;
  margin: 0rem 2rem;
}
.right .value,
.right .year {
  text-align: right;
}
.load {
  background: url("~@assets/report/2bg.png") no-repeat;
  background-size: 100% 100%;
}
.load-left {
  flex-basis: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
  padding: 2.5rem;
}
.ceil-item table {
  flex-basis: 70%;
  height: 100%;
}
.ceil-item td {
  width: 50%;
  height: 25%;
  line-height: 25%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-collapse: collapse;
}
.ceil-item tr.white {
  background: rgba(255, 255, 255, 0.2);
}
.ceil-item td > div {
  display: inline-block;
  width: 50%;
}
.load-name {
  text-align: right;
  font-size: 1.5rem;
  color: #fff;
}
.load-value {
  font-size: 1.5rem;
  font-weight: 600;
}
.load-time {
  font-size: 1.5rem;
  color: #fff;
  padding-left: 1rem;
}
.elec-trend {
  display: flex;
  height: 3rem;
  justify-content: space-between;
  border-bottom: 1px solid #aaa;
  margin: 1rem 0;
}
.control-item {
  flex-basis: 49%;
  display: flex;
  justify-content: space-between;
}
.elec-trend-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 3rem;
}
.button-group {
  text-align: right;
}
.switch-button {
  padding: 0 1rem;
  height: 2.6rem;
  text-align: center;
  line-height: 2rem;
  font-size: 1.2rem;
  color: #fff;
  border: 1px solid #fff;
  background: transparent;
  outline: none;
  margin-left: 1rem;
}
.system-button-selected {
  background: #00f4ff;
  color: #0b1c4a;
}
</style>
